<template>
  <div id="advanced-search">
    <a-form class="ant-advanced-search-form" :form="form" @submit="handleSearch">
      <a-row :gutter="12">
        <a-col :span="20">
          <a-row>
            <a-col :span="8">
              <a-form-item label="帖子ID" v-bind="formItemLayout">
                <a-input v-decorator="['articleId']" size="small" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="评论内容" v-bind="formItemLayout">
                <a-input v-decorator="['comment']" size="small" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="4" :style="{ textAlign: 'right', marginTop: '8px' }">
          <a-button class="smaller-btn" type="primary" html-type="submit">
            查询
          </a-button>
          <a-button class="smaller-btn" @click="handleReset">
            清空
          </a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 }
};
import { filterInputData } from 'utils/common';

export default {
  name: 'searchView',
  components: {},
  data() {
    return {
      formItemLayout,
      form: this.$form.createForm(this),
    }
  },
  created() {},
  mounted() {},
  methods: {
    /**
     * @desc: 查询函数，触发父组件的查询方法
     * @param {event} e 事件参数
     * @author: youzi
     */
    handleSearch(e) {
      if (e) {
        e.preventDefault();
      }
      this.form.validateFields((error, values) => {
        // 用户输入的数据先做校验再传给后端
        if (error) {
          return;
        }
        let tmpObj = {};
        Object.keys(values).forEach(key => {
          if (filterInputData(values[key])) {
            if (typeof values[key] === 'string') {
              tmpObj[key] = values[key].trim();
            } else {
              tmpObj[key] = values[key];
            }
            // 对时间格式特殊化处理
            if (key.includes('Time')) {
              tmpObj[key] = values[key].format('YYYY-MM-DD');
            }
          }
        });
        this.$emit('search', tmpObj);
      });
    },
    /**
     * @desc: 重置表单
     * @author: youzi
     */
    handleReset() {
      this.form.resetFields();
      this.handleSearch();
      this.$message.success('已清空表单！');
    }
  }
};
</script>
<style lang="less">
.ant-calendar {
  .ant-calendar-ok-btn {
    color: #fff !important;
  }
  .ant-calendar-ok-btn-disabled {
    color: #1890ff !important;
  }
}
.ant-advanced-search-form {
  /* background: #fbfbfb; */
  /* border: 1px solid #d9d9d9; */
  border-radius: 6px;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
  margin-bottom: 0 !important;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#advanced-search .ant-form {
  max-width: none;
}
#advanced-search {
  @height: 24px;
}
</style>
